<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <title>org.brophy.js Library Demos</title>
    <script type="text/javascript">MochiKit = {__export__: false};</script>
    <script type="text/javascript" src="../MochiKit/MochiKit.js"></script>
    <script type="text/javascript" src="../org/brophy/js/constant.js"></script>
    <script type="text/javascript" src="../org/brophy/js/util.js"></script>
    <script type="text/javascript" src="../org/brophy/js/ajax.js"></script>
    <script type="text/javascript" src="../org/brophy/js/array.js"></script>
    <script type="text/javascript" src="../org/brophy/js/select.js"></script>
    <script type="text/javascript" src="../org/brophy/js/event.js"></script>
    <script type="text/javascript" src="./org.brophy.js.demo.js"></script>
    <link rel="stylesheet" type="text/css" href="../org/brophy/css/org.brophy.js.css"/>
    <link rel="stylesheet" type="text/css" href="org.brophy.js.demo.css"/>

    <script type="text/javascript">
    //<![CDATA[
    
      // Global namespace to store all demo functions
      obj = {};

      window.onload = function()
      {
        org.brophy.js.demo.drawPageHeader("event");

        var jsCode, htmlCode, instructions;
        
        /********************************************
         * org.brophy.js.event.getKeyCode 
         ********************************************/ 
        jsCode = 
          "obj.testGetKeyCode = function(e)                                \n" + 
          "{                                                               \n" +
          "  alert('The key code was: ' +                                  \n" +
          "         org.brophy.js.event.getKeyCode(e));                   \n" +
          "}                                                                 ";
     
        htmlCode = 
          "<input type='text' name='getKeyCodeInput'                     \n" +  
          "       onkeyup='obj.testGetKeyCode(event);'/>              \n";
     
        instructions = 
          "Press a key in the box below.  You will be alerted of the key " + 
          "code for the key you pressed.<br/><br/>";
          
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.event.getKeyCode",
                             "demo_obj_event_getKeyCode",
                             htmlCode,
                             jsCode,
                             instructions);
  
  
  
        /********************************************
         * org.brophy.js.event.isKey 
         ********************************************/ 
        jsCode = 
          "obj.testIsKey = function(e)                                    \n" + 
          "{                                                              \n" +
          "  var keyCode = document.getElementById('keyCodeInput').value; \n" +
          "  keyCode = parseInt(keyCode);                                 \n" + 
          "  if(org.brophy.js.event.isKey(e, keyCode))                    \n" +
          "  {                                                            \n" +
          "    alert('Key Code Pressed');                                 \n" +
          "  }                                                            \n" +
          "}                                                                ";
     
        htmlCode = 
          "<input type='text' size='4' id='keyCodeInput'/>                \n" +
          " &nbsp;&nbsp;                                                  \n" +
          "<input type='text' size='4' name='isKeyInput'                  \n" + 
          "       onkeyup='obj.testIsKey(event);'/>                    \n";
     
        instructions = 
          "Input an integer key code in the first input below.  Then,     \n" + 
          "press a key in the second input.  You will be alerted of the   \n" + 
          "if the key you pressed coresponds to the keyCode entered in    \n" + 
          "the first input.                                                 "; 
          
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.event.isKey",
                             "demo_obj_event_isKey",
                             htmlCode,
                             jsCode,
                             instructions);
        
  
  
  
        /********************************************
         * org.brophy.js.event.isEnter 
         ********************************************/ 
        jsCode = 
          "obj.testIsEnter = function(e)                                  \n" + 
          "{                                                              \n" +
          "  if(org.brophy.js.event.isEnter(e))                           \n" +
          "  {                                                            \n" +
          "    alert('Enter Key Pressed');                                \n" +
          "  }                                                            \n" +
          "}                                                                ";
     
        htmlCode = 
          "<input type='text' size='4' name='isEnterInput'                \n" + 
          "       onkeyup='obj.testIsEnter(event);'/>                  \n";
     
        instructions = 
          "Press a key in the box below.  You will be alerted when you    \n" + 
          "press the enter key.                                             ";
          
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.event.isEnter",
                             "demo_obj_event_isEnter",
                             htmlCode,
                             jsCode,
                             instructions);
        
  
  
        /********************************************
         * org.brophy.js.event.isEscape 
         ********************************************/ 
        jsCode = 
          "obj.testIsEscape = function(e)                                  \n" +
          "{                                                               \n" +
          "  if(org.brophy.js.event.isEscape(e))                           \n" +
          "  {                                                             \n" +
          "    alert('Escape Key Pressed');                                \n" + 
          "                                                                \n" +
          "    // Prevent IE from clearing the contents of the input       \n" +
          "    org.brophy.js.event.cancel(e);                              \n" +
          "    return false;                                               \n" +
          "  }                                                             \n" +
          "  return true;                                                  \n" +
          "}                                                                 "
     
        htmlCode = 
          "<input type='text' size='4' name='isEscapeInput'                \n" +
          "       onkeydown='return obj.testIsEscape(event);'/>                  \n";

        instructions = 
          "Press a key in the box below.  You will be alerted when you    \n" + 
          "press the enter key.                                             ";
          
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.event.isEscape",
                             "demo_obj_event_isEscape",
                             htmlCode,
                             jsCode,
                             instructions);
        
  
  
        /********************************************
         * org.brophy.js.event.getElement
         ********************************************/ 
        jsCode = 
          "obj.testGetElement = function(e)                               \n" + 
          "{                                                              \n" +
          "  var elem = org.brophy.js.event.getElement(e);                \n" +
          "  alert('The ID of the element you clicked is: ' + elem.id);\n" +  
          "}                                                                 ";
     
        htmlCode =
          "<button id='button1' onclick='obj.testGetElement(event);'>     \n" + 
          "  Button 1                                                     \n" + 
          "</button>                                                      \n" +
          "<button id='button2' onclick='obj.testGetElement(event);'>     \n" + 
          "  Button 2                                                     \n" + 
          "</button>                                                      \n" +
          "<button id='button3' onclick='obj.testGetElement(event);'>     \n" + 
          "  Button 3                                                     \n" + 
          "</button>                                                      \n";
     
        instructions = 
          "Click each of the BUTTON's below.  You will be alerted of the " + 
          "id of the BUTTON you clicked.";
          
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.event.getElement",
                             "demo_obj_event_getElement",
                             htmlCode,
                             jsCode,
                             instructions);
        
  
  
        /********************************************
         * org.brophy.js.event.getRelativeMouseCoords
         ********************************************/ 
        jsCode = 
          "obj.testGetRelativeMouseCoords = function(e)                    \n" +
          "{                                                               \n" +
          "  var coords = org.brophy.js.event.getRelativeMouseCoords(e);   \n" +
          "  document.getElementById('mouseCoordsSpan').innerHTML =       \n" +
          "    MochiKit.Base.serializeJSON(coords);                        \n" +
          "}                                                                 ";
     
        htmlCode =
          "<div class='mouseCoordsDiv'                                     \n" +
          "     onmousemove='obj.testGetRelativeMouseCoords(event);'>      \n" +
          "  Mouse over me!<br/><br/>                                      \n" +
          "  Your relative mouse coordinates are:                          \n" +
          "  <span id='mouseCoordsSpan'></span>                            \n" +
          "</div>                                                          \n";
     
        instructions = 
          "Move the mouse around in the box below.  The contents of the    \n" +
          "indicate the current X and Y coordinates of the mouse relative  \n" +
          "to the top left corder of the current viewport                    ";
          
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.event.getRelativeMouseCoords",
                             "demo_obj_event_getRelativeMouseCoords",
                             htmlCode,
                             jsCode,
                             instructions);


        /********************************************
         * org.brophy.js.event.getAbsoluteMouseCoords
         ********************************************/ 
        jsCode = 
          "obj.testGetAbsoluteMouseCoords = function(e)                    \n" +
          "{                                                               \n" +
          "  var coords = org.brophy.js.event.getAbsoluteMouseCoords(e);   \n" +
          "  document.getElementById('mouseCoordsSpan2').innerHTML =       \n" +
          "    MochiKit.Base.serializeJSON(coords);                        \n" +
          "}                                                                 ";
     
        htmlCode =
          "<div class='mouseCoordsDiv'                                     \n" +
          "     onmousemove='obj.testGetAbsoluteMouseCoords(event);'>      \n" +
          "  Mouse over me!<br/><br/>                                      \n" +
          "  Your absolute mouse corrdinates are:                          \n" +
          "  <span id='mouseCoordsSpan2'></span>                           \n" +
          "</div>                                                          \n";
     
        instructions = 
          "Move the mouse around in the box below.  The contents of the    \n" +
          "indicate the current X and Y coordinates of the mouse relative  \n" +
          "to the top left corder of this document                           ";
          
        org.brophy.js.demo.drawDemoSection(
                             "org.brophy.js.event.getAbsoluteMouseCoords",
                             "demo_obj_event_getAbsolutEMouseCoords",
                             htmlCode,
                             jsCode,
                             instructions);

      }
  
    //]]>
    </script>
  
  </head> 
  
  <body>
  </body>
  
</html>
  
  
  
